<template>
  <div>
    <el-dialog title="客户标签" :visible.sync="tagVisible" width="594px">
      <el-row class="titleRow">
        <span class="titleLine"></span>
        <span>标签名称</span>
      </el-row>
      <div class="showTag">
        <div v-for="(item, index) in tagList" :key="index">
          <el-tag v-if="item.flag == 0" closable @close="handleClose(item)">{{
            item.name
          }}</el-tag>
          <el-tag v-else>{{ item.name }}</el-tag>
        </div>
      </div>
      <div class="addTag">
        <el-input
          class="input-new-tag"
          v-if="addTagVisible"
          v-model="addTagValue"
          ref="saveTagInput"
          size="small"
          @blur="handleInputConfirm"
          style="width: 84px"
          :maxlength="160"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput"
          >+ 添加标签</el-button
        >
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="tagVisible = false">取消</el-button>
        <el-button type="primary" @click="handelConfirm" v-preventReClick="1000"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getTag, updateCustomerTag } from "@/api/beathAdd";
export default {
  name: "CustomerTag",
  components: {},
  props: {
    // 添加标签显隐
    visible: {
      type: Boolean,
      default: false,
    },
    //客户标签id
    batchAddingId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tagList: [],
      addTagVisible: false,
      addTagValue: "",
    };
  },
  computed: {
    tagVisible: {
      get() {
        if (this.visible) {
          //   this.$nextTick(() => {
          //     this.$refs["importForm"].clearValidate();
          //   });
        }
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  watch: {},
  created() {
    this.getTag();
  },
  mounted() {},
  methods: {
    onOpen() {},
    onClose() {
      // this.$refs["importForm"].resetFields();
    },
    close() {
      this.$emit("update:visible", false);
    },
    handelConfirm() {
      let param = {
        batchAddingId: this.batchAddingId,
        customerTag: this.tagList,
      };
      updateCustomerTag(param).then((res) => {
        if (res.code == 200) {
          this.$parent.getListFn();
          this.close();
        }
      });
    },
    //关闭标签
    handleClose(tag) {
      this.tagList.splice(this.tagList.indexOf(tag), 1);
    },
    //展示
    showInput() {
      this.addTagVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    //新增标签
    handleInputConfirm() {
      this.addTagValue = this.addTagValue.replace(/^\s*|\s*$/g,"");
      if (
        this.addTagValue &&
        this.addTagValue != "" &&
        this.addTagValue != null &&
        /[^\s]/.test(this.addTagValue)
      ) {
        let flag = true;
        let num = 0;
        this.tagList.forEach((e) => {
          if (this.addTagValue == e.name) {
            flag = false;
          this.msgError("存在相同标签！");
          }
          num += String(e.name).length;
          if(num > 160){
            this.msgError('标签总字符数不能超过160');
            flag = false;
          }
        });
        let addTagValue = this.addTagValue;
        if (addTagValue && flag) {
          this.tagList.push({ name: addTagValue, flag: 0 });
        }
        this.addTagVisible = false;
        this.addTagValue = "";
      } else {
        this.msgError("添加的标签不能为空！");
        this.addTagVisible = false;
        this.addTagValue = "";
      }
    },

    //获取标签
    getTag() {
      getTag({ batchAddingId: this.batchAddingId }).then((res) => {
        this.tagList = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.titleRow {
  margin: 12px 10px;
}
.titleLine {
  height: 16px;
  border: #0f40f5 solid;
  border-width: 2px;
  border-radius: 20%;
  margin-right: 10px;
}

.showTag {
  padding: 10px;
  div {
    padding: 8px;
    display: inline-block;
  }
}

.addTag {
  margin: 10px 0 0 18px;
}

::v-deep.el-tag{
  height: auto;
  max-height:84px;
  padding: 0px 8px;
  line-height: 22px;
  max-width: 520px;
  white-space: break-spaces;
}
</style>
